<template>
  <div class="home-page">
    <div class="box-title">数据概况</div>
    <div class="box1">
      <el-card shadow="never" class="item" body-style="background: #1790ff;">
        <div class="tit"><i class="el-icon-user" /> 总出售音值人次</div>
        <div class="con">90,878,999,213</div>
      </el-card>

      <el-card shadow="never" class="item" body-style="background: #73a0fa">
        <div class="tit"><i class="el-icon-user" /> 总购买音值人次</div>
        <div class="con">90,878,999,213</div>
      </el-card>
      <el-card shadow="never" class="item auto-width">
        <div class="tit" style="color: #9e9e9e"><i class="el-icon-date" /> 日期筛选</div>
        <el-date-picker
          v-model="searchTime"
          type="date"
          placeholder="选择日期"
          size="mini"
          style="margin: 20px 10px 0 0"
        />
        <el-button size="mini" type="primary" plain icon="el-icon-search">查询</el-button>
      </el-card>
    </div>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never">
          <div class="broken-line-title">
            <div class="item">
              <div class="tit">总注册会员数</div>
              <div class="con">90,878,999,213</div>
            </div>

            <div class="item">
              <div class="tit">今日新增会员</div>
              <div class="con">90,87</div>
            </div>

            <div class="item">
              <div class="tit">今日活跃人数</div>
              <div class="con">90,878,999,21</div>
            </div>

            <div class="item">
              <div class="tit">今日订单量</div>
              <div class="con">90,878</div>
            </div>
          </div>

          <BrokenLine :line-data="brokenLineData1" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <div class="broken-line-title">
            <div class="item">
              <div class="tit">累计成交金额</div>
              <div class="con">90,878,999,213</div>
            </div>

            <div class="item">
              <div class="tit">当前价格</div>
              <div class="con">9.87</div>
            </div>

            <div class="item">
              <div class="tit">当前成交量</div>
              <div class="con">90,878,999,21</div>
            </div>

            <div class="item">
              <div class="tit">当前求购量</div>
              <div class="con">90,878</div>
            </div>
          </div>
          <BrokenLine :line-data="brokenLineData2" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="16">
        <div class="box-title">地图分布</div>
        <el-card shadow="never" style="margin-top: 20px">
          <ChinaMap :map-data="mapData" />
        </el-card>
      </el-col>

      <el-col :span="8">
        <div class="box-title">交易榜单</div>
        <el-row :gutter="20" class="top-box">
          <el-col :span="24">
            <el-card shadow="never">
              <el-table
                :data="tableData"
                style="width: 100%"
                size="mini"
              >
                <el-table-column
                  type="index"
                  align="center"
                  label="排行"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    <span :class="scope.$index < 3 && 'top3'">{{ scope.$index + 1 }}</span>
                  </template></el-table-column>
                <el-table-column
                  prop="uid"
                  label="UID"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                />
                <el-table-column
                  prop="num"
                  label="今日收购量"
                />
              </el-table>
            </el-card>
          </el-col>

          <el-col :span="24">
            <el-card shadow="never" style="margin-top: 20px">
              <el-table
                :data="tableData"
                style="width: 100%"
                size="mini"
              >
                <el-table-column
                  type="index"
                  align="center"
                  label="排行"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    <span :class="scope.$index < 3 && 'top3'">{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="uid"
                  label="UID"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                />
                <el-table-column
                  prop="num"
                  label="今日转让量"
                />
              </el-table>
            </el-card>

          </el-col>
        </el-row>

      </el-col>
    </el-row>

    <div class="box-title">数据概况</div>
    <div class="stats-title-box">
      <div v-for="(item, index) in tabTitle" :key="index" class="item" :class="tabType == index && 'active' " @click="()=>statsTabChange(index)">
        <div class="tit">
          {{ item.title }}
          <el-tooltip v-if="item.tips" :content="item.tips" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip></div>
        <div class="con">11,067</div>
      </div>
    </div>

    <el-card shadow="never">
      <el-table :data="tableData">
        <el-table-column
          v-for="(item, index) in tabType == 4 ? cols[1] : (tabType == 6 ? cols[2] : cols[0])"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        />

        <el-table-column v-if="tabType !== 6" :key="tabType + 'fuck'" prop="" align="center" label="操作" fixed="right" width="145px">
          <template v-if="tabType == 0">
            <el-button type="primary" plain size="mini">编辑</el-button>
            <el-button type="danger" plain size="mini">冻结</el-button>
          </template>

          <template v-if="tabType == 1">
            <el-button type="primary" plain size="mini">编辑</el-button>
            <el-button type="danger" plain size="mini">冻结</el-button>
          </template>

          <template v-if="tabType == 2">
            <el-button type="primary" plain size="mini">编辑</el-button>
            <el-button type="danger" plain size="mini">冻结</el-button>
          </template>

          <template v-if="tabType == 3">
            <el-button type="primary" plain size="mini">编辑</el-button>
            <el-button type="danger" plain size="mini">冻结</el-button>
          </template>

          <template v-if="tabType == 4">
            <el-button type="primary" plain size="mini">查看</el-button>
          </template>

          <template v-if="tabType == 5">
            <el-button type="primary" plain size="mini">编辑</el-button>
            <el-button type="danger" plain size="mini">冻结</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="margin-top: 20px"
      />
    </el-card>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import BrokenLine from './components/brokenLine.vue'
import ChinaMap from './components/map.vue'

export default {
  name: 'Home',
  components: {
    BrokenLine,
    ChinaMap
  },
  data() {
    const data = []
    for (let i = 0; i <= 360; i++) {
      const t = i / 180 * Math.PI
      const r = Math.sin(2 * t) * Math.cos(2 * t)
      data.push([r, i])
    }

    return {
      searchTime: '', // 搜索时间
      brokenLineData1: {
        title: '用户走势折线图',
        color: ['#73A0FA', '#73DEB3', '#FFB761', '#b6a2de'],
        label: ['总注册会员数', '今日新增会员', '今日活跃人数', '今日订单量'],
        xTime: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
        yData: [
          {
            name: '总注册会员数',
            type: 'line',
            smooth: true,
            data: [13, 1, 4, 44, 45, 322, 76]
          },
          {
            name: '今日新增会员',
            type: 'line',
            smooth: true,
            data: [13, 54, 34, 344, 35, 53]
          },
          {
            name: '今日活跃人数',
            type: 'line',
            smooth: true,
            data: [13, 2, 2, 32, 123, 23, 136]
          },
          {
            name: '今日订单量',
            type: 'line',
            smooth: true,
            data: [3, 24, 32, 132, 13, 232, 136]
          }
        ]
      },
      brokenLineData2: {
        title: '交易走势折线图',
        color: ['#73A0FA', '#73DEB3', '#FFB761', '#b6a2de'],
        label: ['累计成交金额', '当前价格', '当前成交量', '当前求购量'],
        xTime: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
        yData: [
          {
            name: '累计成交金额',
            type: 'line',
            smooth: true,
            data: [27, 1, 4, 44, 45, 322, 76]
          },
          {
            name: '当前价格',
            type: 'line',
            smooth: true,
            data: [53, 4, 34, 34, 39, 153]
          },
          {
            name: '当前成交量',
            type: 'line',
            smooth: true,
            data: [63, 2, 2, 32, 123, 23, 166]
          },
          {
            name: '当前求购量',
            type: 'line',
            smooth: true,
            data: [43, 14, 52, 32, 13, 132, 336]
          }
        ]
      },
      mapData: [{ // 如果有业务数据,就按该格式绑定到这里
        'name': '北京',
        'value': 599
      }, {
        'name': '上海',
        'value': 142
      }, {
        'name': '黑龙江',
        'value': 44
      }, {
        'name': '深圳',
        'value': 92
      }, {
        'name': '湖北',
        'value': 810
      }, {
        'name': '四川',
        'value': 453
      }],
      tableData: [{
        uid: 1020,
        name: '王小虎',
        num: 29999
      }, {
        uid: 1254,
        name: '王小虎',
        num: 91999
      },
      {
        uid: 1230,
        name: '王小虎',
        num: 999529
      },
      {
        uid: 1210,
        name: '王小虎',
        num: 99999
      },
      {
        uid: 1420,
        name: '王小虎',
        num: 99990
      },
      {
        uid: 1420,
        name: '王小虎',
        num: 99990
      },
      {
        uid: 1420,
        name: '王小虎',
        num: 99990
      }],
      tabType: 0, // 数据统计index
      tabTitle: [
        { title: '同IP登陆账号' },
        { title: '异地登陆' },
        { title: '卖出异常预警', tips: '每日卖单超出设定值的人数' },
        { title: '买入异常预警', tips: '每日买单超出设定值的人数' },
        { title: '订单取消异常' },
        { title: '账户资金超额预警' },
        { title: '历史出售数量前100' }
      ],
      cols: [[
        { prop: 'uid', label: '会员UID' },
        { prop: 'name', label: '身份证姓名' },
        { prop: 'name', label: '会员手机' },
        { prop: 'name', label: '待划转音值' },
        { prop: 'name', label: '音值' },
        { prop: 'name', label: '音波' },
        { prop: 'name', label: '冻结音波' },
        { prop: 'name', label: '今日买入音值' },
        { prop: 'name', label: '今日卖出音值' },
        { prop: 'name', label: '信用度' },
        { prop: 'name', label: '身份证号' },
        { prop: 'name', label: '状态' },
        { prop: 'name', label: '注册时间' },
        { prop: 'name', label: '最后登录时间' },
        { prop: 'name', label: '登录IP' },
        { prop: 'name', label: '常用地' }
      ],
      [
        { prop: 'uid', label: '订单编号' },
        { prop: 'name', label: '买家UID' },
        { prop: 'name', label: '买家姓名' },
        { prop: 'name', label: '买家登录IP' },
        { prop: 'name', label: '订单金额（CNY）' },
        { prop: 'name', label: '数量(个)' },
        { prop: 'name', label: '单价(CNY)' },
        { prop: 'name', label: '订单时间' },
        { prop: 'name', label: '卖家UID' },
        { prop: 'name', label: '卖家登录IP' },
        { prop: 'name', label: '收款人姓名' },
        { prop: 'name', label: '收款方式' },
        { prop: 'name', label: '交易手续费（YDZ）' },
        { prop: 'name', label: '状态' }
      ],
      [
        { prop: 'uid', label: '会员UID' },
        { prop: 'name', label: '身份证姓名' },
        { prop: 'name', label: '会员手机' },
        { prop: 'name', label: '累计出售音值' },
        { prop: 'name', label: '今日卖出音值' },
        { prop: 'name', label: '信用度' },
        { prop: 'name', label: '身份证号' },
        { prop: 'name', label: '状态' },
        { prop: 'name', label: '注册时间' },
        { prop: 'name', label: '最后登录时间' },
        { prop: 'name', label: '登录IP' },
        { prop: 'name', label: '常用地' }
      ]
      ]
    }
  },
  methods: {
    statsTabChange(type) {
      this.tabType = ~~type
      console.log(type)
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './style.scss';
</style>
